﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>Add products to cart</title>
<link rel="stylesheet" type="text/css" href="./styles/core.css" />
<link rel="stylesheet" type="text/css" href="./styles/jquery/jquery-ui-1.8.15.custom.css" />
<script type="text/javascript" src="./javascripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="./javascripts/jquery-ui-1.8.15.custom.min.js"></script>
</head>
<body>
<div id="dialog-sign" >
	<div class="wraper">
	<ul style="width:45%;height:150px;float:left;border:1px solid #ccc;">
		<li style="text-align:left;border-bottom:1px solid #ccc;padding-bottom:7px;margin:0px;">Sign In</li>
		<li><input type="text" name="" id="" /></li>
		<li><input type="text" name="" id="" /></li>
		<li style="text-align:left;"><input type="submit" name="" id="" style="margin-left:25px;width:100px;height:25px;cursor:pointer;" value="Sign In"/></li>
	</ul>
	<ul style="width:45%;height:150px;float:right;border:1px solid #ccc;">
		<li style="text-align:left;border-bottom:1px solid #ccc;padding-bottom:7px;margin:0px;">Sign Up</li>
		<li><input type="text" name="" id="" /></li>
		<li style="text-align:left;"><input type="submit" name="" id="" style="margin-left:25px;width:150px;height:25px;cursor:pointer;" value="Sign Up,It's free"/></li>
	</ul>
	<br style="clear:both;">
	</div>
	<p class="layout"><a href="g_order.html">Express Payment</a>.No Register</p>
</div>
<div id="cart" class="layout">
	<span style="margin-right:5%;font-size:14px;font-weight:bold;"><span class="quanties">cart(2)</span></span>
	
	<div id="cart_table" class="layout">
		<span class="close ui-icon ui-icon-closethick" style="position:absolute;right:5px;top:5px;"></span>
			<div class='table_wraper'>
				<table id="mini_cart" class="cart-list">
				<tr>
					<td><img class="s_pic" src="./images/pro_thumb_1.jpg" alt="" /></td>
					<td>Attractive Black</td>
					<td ><a href="#" class="del">delete</a></td>
				</tr>
				<tr>
					<td><img class="s_pic" src="./images/pro_thumb_2.jpg" alt="" /></td>
					<td>Sexy Lingerie</td>
					<td ><a href="#" class="del">delete</a></td>
				</tr>
			</table>
			</div>
			<span style="margin-right:50px;">Subtotal</span>
			<a class="btn_check uibutton ui-state-default">
				<span class="ui-icon ui-icon-squaresmall-plus"></span>
				Check Out
			</a>
	</div>
	
</div>
<div id="header" class="layout">#header</div>
<div id="nav" class="layout" style="height:30px;">#navigation</div>
<div id="path" class="layout">#path > path > path > path > path </div>
<div id="container">
<div id="pro_pic" class="layout">#product picture<br/>
<img src="./images/123.jpg" alt="" />
</div>
<div id="pro_name" class="layout">#product name</div>
<div id="pro_add" class="layout">
#add product
<button class="btn_add uibutton ui-state-default">
 <span class="ui-icon ui-icon-squaresmall-plus"></span>
	Add to Cart
</button>
</div>
</div>
<script type="text/javascript">
$('.ui-state-default').hover(
	function() { $(this).addClass('ui-state-hover'); }, 
	function() { $(this).removeClass('ui-state-hover'); }
);

$('.btn_add').click(function(){

	$('#cart_table').slideDown('slow',function(){
		$(this).children('.close').click(function(){
			$(this).parent().hide('normal');
		});
		
	});
	
	var clonePic=$('#pro_pic').clone().insertBefore('#pro_name').addClass('clone');
	clonePic.animate({opacity:'show'},{queue:false,duration:800})
	.animate({left:'75%',top:'13%'},{queue:false,duration:500})
	.animate({width:'10%',height:'20%'},200,function(){
		$(this).children('img').animate({width:'60%',height:'70%'},200);
	}).delay('300').hide('normal',function(){
			if($('#mini_cart').find('.del').length==0){
				$('#mini_cart').find('tr').remove();
			}
			$('#mini_cart').prepend("<tr><td><img class='s_pic' src='./images/123.jpg' alt='' /></td><td>Attractive Black</td><td ><a href='#' class='del'>delete</a></td></tr>");
			$('#mini_cart').find('.del').click(function(){
				$(this).parent().parent().remove();
				if($('#mini_cart').find('.del').length==0){
					$('#mini_cart').html('<tr><td><div style="text-align:center;padding:10px;font-size:16px;">Nothing</div></td></tr>');
				};
				return false;
			});

			$('.clone').remove();
	});
	

	$(".quanties").mouseover(function(){
		$('#cart_table').slideDown('slow');
	});
});


$('.btn_check').click(function(){
	$('#dialog-sign').dialog({
			resizable: false,
			height:300,
			width:550,
			modal: true,
		//	buttons:{}
	});

});
</script>
</body>
</html>